<template>
  <div class="daraBoardLint_content grid">
    <div class="line_list" v-for="(item, inx) in list" :key="inx">
      <div class="header_title flex flex-ac p-10">
        <div class="icon">
          <img :src="iconPng" class="img" />
        </div>
        <div class="title ml-10">{{ item.title }}</div>
      </div>
      <div class="number_box flex">
        <div class="number_left flex flex-c flex-ac pt-10">
          <div class="num flex">
            5
            <text>个</text>
          </div>
          <div class="txt">合作</div>
        </div>
        <div class="shu"></div>
        <div class="number_right flex flex-c flex-ac pt-10">
          <div class="num flex flex-ac">
            5
            <text>个</text>
          </div>
          <div class="txt">未实施合同</div>
        </div>
      </div>
      <div class="main_title flex flex-ac mt-10 p-10">
        <div class="icon">
          <img :src="iconPng" class="img" />
        </div>
        <div class="title ml-10">{{ item.title }}</div>
      </div>
      <div class="main_box ml-10 mr-10 mb-10">
        <div class="myEcharts">
          <echartPie
            class="main_echart"
            width="100%"
            height="130"
            :options="data.myEchartsOption"
            isClick
            @callbackFun="callbackFun"
            :className="item.className"
          ></echartPie>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import {
  ref,
  computed,
  watch,
  onMounted,
  onBeforeUnmount,
  reactive,
  shallowRef,
  onUnmounted,
} from "vue";
import { useStore } from "vuex";
import * as echarts from "echarts";
import echartPie from "@/components/Echart/echart-pie.vue";
const store = useStore();

const props = defineProps<{}>();
const iconPng = new URL("@/assets/img/index/pf.png", import.meta.url).href;

let list = ref([
  {
    title: "某某",
    val1: 5,
    val2: 5,
    pieVal: [40, 50],
    className: "className1",
  },
  {
    title: "某某",
    val1: 5,
    val2: 5,
    pieVal: [40, 50],
    className: "className2",
  },
  {
    title: "某某",
    val1: 5,
    val2: 5,
    pieVal: [40, 50],
    className: "className2",
  },
]);

const data = reactive({
  myEchartsOption: {
    title: {
      trigger: "item",
    },
    tooltip: {
      trigger: "item",
    },
    // legend: {
    //   orient: "vertical",
    //   left: "left",
    // },
    series: [
      {
        name: "Access From",
        type: "pie",
        radius: "90%",
        avoidLabelOverlap: false,

        label: {
          show: true,
          position: "inner",
          formatter: "{d}%\n{b}",
          color: "#ffffff", //文字的颜色
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 14,
            fontWeight: "bold",
          },
        },
        //中间的白边设置
        itemStyle: {
          // 此配置
          normal: {
            borderWidth: 1,
            borderColor: "#fff",
          },
        },
        labelLine: {
          show: false,
        },
        data: [
          { value: 1048, name: "已通过" },
          { value: 735, name: "已拒绝" },
        ],
      },
    ],
  },
});
// echarts组件的点击抛出事件
const callbackFun = (obj) => {
  console.log(obj, "拿到对象做点你需要的功能");
};
onMounted(() => {});

onBeforeUnmount(() => {});
onUnmounted(() => {});

onBeforeUnmount(() => {});
</script>
  
  <style lang="scss" scoped>
.daraBoardLint_content {
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 10px;
  .line_list {
    background: #fff;
    width: 100%;
    border-radius: 6px;
  }
  .header_title,.main_title {
    height: 40px;
    .icon {
      width: 22px;
      height: 22px;
      .img {
        width: 100%;
        height: 100%;
      }
    }
    .title {
      font-size: 15px;
      font-weight: 550;
      color: #333333;
    }
  }
  .main_title {
    .title { 
    }
  }
  .number_box {
    width: 100%;
    .number_left {
      width: 40%;
    }
    .number_right {
      width: 60%;
    }
    .shu {
      width: 1px;
      height: 56px;
      background: #e8e8e8;
    }
    .num {
      font-size: 16px;
      font-weight: 550;
      color: #1890ff;
      align-items: baseline;
      padding-bottom: 10px;
      text {
        margin-left: 5px;
        font-size: 11px;
        vertical-align: bottom;
        color: #333333;
      }
    }
    .txt {
      font-size: 11px;
      color: #999999;
    }
  }
  .myEcharts {
    width: 100%;
    height: 100%;
  }
  .main_box {
    .main_echart {
      width: 100%;
      height: 130px;
    }
  }
}
</style> 